<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人博客系统 - 首页</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">

    <!-- 自定义样式 -->
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', sans-serif;
        }

        header {
            background-color: #3a7bd5;
            color: white;
            padding: 1rem 2rem;
        }

        header h1 {
            margin: 0;
            font-size: 1.75rem;
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-left: 1.25rem;
            font-weight: bold;
        }

        nav a:hover {
            text-decoration: underline;
        }

        .category-bar {
            margin: 1rem 2rem;
            padding: 0.5rem 1rem;
            background: #eef6ff;
            border-radius: 8px;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            align-items: center;
        }

        .category-bar strong {
            color: #3a7bd5;
        }

        .category-bar a {
            color: #3a7bd5;
            text-decoration: none;
            font-size: 0.95rem;
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
        }

        .category-bar .active {
            background-color: #3a7bd5;
            color: white;
        }

        .article-list {
            margin: 2rem;
        }

        .article-card {
            background: white;
            padding: 1rem 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease-in-out;
        }

        .article-card:hover {
            transform: translateY(-4px);
        }

        .article-card h2 a {
            color: #3a7bd5;
            text-decoration: none;
            font-size: 1.25rem;
        }

        .meta {
            font-size: 0.85rem;
            color: #666;
            margin-bottom: 0.5rem;
        }

        .summary {
            color: #333;
            line-height: 1.5;
            margin-bottom: 0.75rem;
        }

        .read-more {
            display: inline-block;
            margin-top: 0.5rem;
            color: #3a7bd5;
            text-decoration: none;
            font-size: 0.95rem;
        }

        .read-more i {
            margin-left: 0.25rem;
        }

        .pagination {
            margin: 2rem auto;
            text-align: center;
        }

        .pagination .page-link {
            color: #3a7bd5;
            border-radius: 4px;
            min-width: 50px;
            text-align: center;
            transition: all 0.2s ease-in-out;
        }

        .pagination .page-item.active .page-link {
            background-color: #3a7bd5;
            color: white;
            border-color: #3a7bd5;
        }

        .pagination .page-link:hover {
            background-color: #e6f0ff;
        }

        .pagination .page-item.disabled .page-link {
            color: #999;
            pointer-events: none;
            cursor: not-allowed;
            background-color: #fff;
        }

        .no-article {
            text-align: center;
            color: #888;
            font-style: italic;
            margin: 2rem;
            font-size: 1rem;
        }
    </style>
</head>
<body>

<header class="d-flex justify-content-between align-items-center">
    <h1>个人博客系统</h1>
   <nav class="d-flex align-items-center">
    <a th:href="@{/}"><i class="bi bi-house"></i> 首页</a>

  <!-- 用户未登录时显示登录和注册 -->
<div th:if="${user == null}">
    <a th:href="@{/login}"><i class="bi bi-box-arrow-in-right"></i> 登录</a>
    <a th:href="@{/register}"><i class="bi bi-person-plus"></i> 注册</a>
</div>

    <!-- 用户已登录时显示用户名和个人中心 -->
<div th:if="${user != null}">
    <img th:src="${user.avatar != null ? user.avatar : '/image/avatar0.jpg'}" alt="用户头像" class="rounded-circle me-2" width="32" height="32">
    <span class="text-white me-3">欢迎, <b th:text="${user.username}"></b></span>
    <a th:href="@{/user/center}"><i class="bi bi-person-circle"></i> 个人中心</a>
    <a th:href="@{/logout}" class="btn btn-danger ms-3"><i class="bi bi-box-arrow-left"></i> 退出</a>
    <a th:if="${user.role == 1}" th:href="@{/api/admin/dashboard}" class="btn btn-warning ms-3"><i class="bi bi-speedometer2"></i> 后台管理</a>
</div>
</nav>

</header>

<main>
    <section class="category-bar">
        <strong><i class="bi bi-tags-fill"></i> 分类：</strong>
        <a th:href="@{/}" th:classappend="${categoryId} == null ? 'active' : ''">全部</a>
        <a th:each="cat : ${categories}"
           th:href="@{'/?category=' + ${cat.categoryId}}"
           th:text="${cat.name}"
           th:classappend="${categoryId != null and categoryId == cat.categoryId} ? 'active' : ''">        </a>
    </section>

    <section class="article-list">

        <!-- 遍历文章列表，展示每篇文章的信息 -->
        <div th:each="article : ${articles}" class="article-card mb-4">
            <!-- 文章标题，点击可跳转至文章详情页 -->·
            <h2><a th:href="@{'/api/articles/' + ${article.articleId}}" th:text="${article.title}"></a></h2>

            <!-- 文章元信息（作者、分类、发布时间、点击量） -->
            <div class="meta mb-2">
                <span><i class="bi bi-person"></i> 作者：<span th:text="${article.authorName}"></span></span>
                <span class="ms-3"><i class="bi bi-tag"></i> 分类：<span th:text="${article.categoryName}"></span></span>
                <span class="ms-3"><i class="bi bi-calendar-event"></i> 发布时间：<span th:text="${article.createTime}"></span></span>
                <span class="ms-3"><i class="bi bi-eye"></i> 点击量：<span th:text="${article.clickCount}"></span></span>
            </div>

            <!-- 文章内容前50个字 -->
            <p class="summary" th:text="${#strings.abbreviate(article.content, 50)}"></p>
            <!-- 摘要信息（当前被注释掉，如有需要可以取消注释） -->
            <!-- <p class="summary" th:text="${article.summary}"></p> -->

            <!-- 阅读更多链接 -->
            <a class="read-more" th:href="@{'/api/articles/' + ${article.articleId}}">阅读全文 <i class="bi bi-arrow-right"></i></a>
        </div>

        <!-- 如果文章列表为空，显示提示信息 -->
        <div th:if="${#lists.isEmpty(articles)}" class="no-article">
            <i class="bi bi-journal-x fs-1 text-muted"></i>
            <p>暂时还没有文章发布，敬请期待！</p>
        </div>
    </section>

    <div class="pagination">
        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                <li class="page-item" th:classappend="${!page.hasPrevious} ? 'disabled'">
                    <a class="page-link" th:href="@{'/?page=' + ${page.current - 1}}" tabindex="-1">上一页</a>
                </li>
                <li class="page-item"><a class="page-link" th:text="${page.current}"></a></li>
                <li class="page-item"><span class="page-link">/</span></li>
                <li class="page-item"><a class="page-link" th:text="${page.pages}"></a></li>
                <li class="page-item" th:classappend="${!page.hasNext} ? 'disabled'">
                    <a class="page-link" th:href="@{'/?page=' + ${page.current + 1}}">下一页</a>
                </li>
            </ul>
        </nav>
    </div>
</main>

<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 从 document.cookie 中提取指定名称的 cookie 值
    function getCookie(name) {
        const value = "; " + document.cookie;
        const parts = value.split("; " + name + "=");
        if (parts.length === 2) return parts.pop().split(";").shift();
    }

    // 示例函数：发送带 CSRF token 的 POST 请求
    function sendAuthenticatedPost(url, data) {
        const csrfToken = getCookie("XSRF-TOKEN");
        return fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-XSRF-TOKEN': csrfToken
            },
            body: JSON.stringify(data),
            credentials: 'include'
        });
    }
</script>

</body>
</html>
